<template>
	<view class="container">



		<view class="draggable-box" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
			:style="{ transform: `translate(${0}px, ${offsetY}px)` }">
			<scroll-view scroll-y="true">
				<view class="top_box">
					<view class="box_title">
						<text>{{switchLine.area}}</text>
					</view>

					<u-tabs :list="areaType" :is-scroll="true" active-color="#FF7F00" inactive-color=" #666666"
						:bold="bold" :current="areaTypeCurrent" @change="getList" :show-bar="false"></u-tabs>

					<view class="box_or">
						<view class="address">{{switchLine.startPointName}}</view>
						<image src="/static/image/addres_you.png" mode=""></image>
						<view class="address">{{switchLine.endPointName}}</view>
					</view>
					<view class="current_address">{{myNearest.name}}</view>
					<view class="walk_distance">步行到快递点 {{remainingDistance}} {{remainingTime}}</view>
				</view>

				<scroll-view scroll-x style="white-space: nowrap;" @scroll="startScroll" :scroll-left="scrollLeftLeft"
					scroll-with-animation>
					<view v-for="(item,index) in markerList" :key="index" :id="'marker-' + index"
						style="display: inline-block;text-align: center;">
						<view class="flex" style="margin:20rpx 0 30rpx 0;position: relative;">
							<view class="start-node" v-if="item.title == '起始点'">始</view>
							<view class="start-node" v-else-if="item.title == '结束点'">终</view>
							<view class="start-node" v-else-if="basics == index">
								<image src="/static/image/icon_you.png" mode=""></image>
							</view>
							<view class="middle-node" v-else>
								<image src="/static/image/icon_you.png" mode=""></image>
							</view>
							<view style="height: 17rpx;width: 80rpx;"
								:style="item.title == '起始点'?'background-color: #fff;':'background-color: #049c50;'">
							</view>
							<view style="height: 17rpx;width: 80rpx;"
								:style="item.title == '结束点'?'background-color: #fff;':'background-color: #049c50;'">
							</view>
						</view>
						<view class="vertical-text" @tap="nodeGap" :data-index="index"
							:style="basics == index?'color:black;':'color:gray;'">
							{{item.name}}
							<view class="nearest" v-if="myNearests.name == item.name">距离最近</view>
						</view>
					</view>
				</scroll-view>

			</scroll-view>
		</view>
		<map id="map" class="map" :style="'height:'+ mapHeight +'vh'" :latitude="userLocation.latitude"
			:longitude="userLocation.longitude" :markers="markers" :polyline="polyline" :circles="circles"
			@show-location="true" @markertap="handleMarkerTap" show-location>
		</map>



		<view class="box_bottom flex padding">
			<!-- <button @tap="goPlaceOrder"></button> -->
			<button class="cu-btn bg-orange lg" style="width: 80%;" @tap="goPlaceOrder">去下单</button>
		</view>




	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	import empty from '@/components/empty'
	// 引入腾讯地图SDK
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js';
	import {
		generateSignatureGet
	} from '@/utils/signature.js';
	import configData from '@/common/config.js'
	export default {
		components: {
			empty,
		},
		data() {
			return {
				panelHeight: -51,
				scrollLeftLeft: 0,
				scrollLeft: 0,
				screenWidth: 0, //手机屏幕宽度
				screenHeight: 0, //手机屏幕高度
				basics: 0,
				current: 0,
				bold: false,
				lists: [],
				// 标记点数组
				markers: [],
				markerList: [],
				// 路线数据
				polyline: [],
				// 圆形区域（用于显示当前位置精度）
				circles: [],
				// 途经点集合
				waypoints: [],
				mapKey: configData.MapKey,
				// 地图上下文
				mapContext: null,
				// 是否正在导航
				isNavigating: false,
				// 用户当前位置
				userLocation: null,
				// 位置更新定时器
				locationTimer: null,
				// 当前路线点索引
				currentPointIndex: 0,
				// 剩余距离
				remainingDistance: '0米',
				// 剩余时间
				remainingTime: '0分钟',
				// 下一个转向信息
				nextTurnInfo: '直行',
				// 完整路线点数组
				routePoints: [],
				// 路线总距离
				totalDistance: 0,
				// 路线总时间
				totalTime: 0,
				receive: [], //往配送柜送的订单
				shipper: [], //需要去接收的订单

				groupedArray: {}, //某个快递柜中的订单

				startY: 0,
				offsetY: 2200,
				recordOffsetY: 0,

				pointList: [],

				myNearest: {},
				myNearests: {},


				areaType: [],
				areaTypeCurrent: 0,
				switchLine: {}, //线路切换

				mapHeight: 70,
			}
		},

		watch: {
			offsetY(newVal, oldVal) {
				const H80 = this.screenHeight * 0.55
				const H30 = this.screenHeight * 0.1
				if (newVal < H30) {
					this.offsetY = H30
				} else if (newVal > H80) {
					this.offsetY = H80
				}


			},
			screenHeight(newVal, oldVal) {
				this.offsetY = newVal
			},
		},

		onReady() {

			// 获取用户当前位置
			this.getUserLocation();
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.screenWidth;
					this.screenHeight = res.screenHeight;
					this.offsetY = this.screenHeight * 0.55
				}
			});
		},

		onUnload() {
			// 页面卸载时清理定时器
			if (this.locationTimer) {
				clearInterval(this.locationTimer);
			}
		},


		methods: {


			onTouchStart(e) {
				this.startY = e.touches[0].clientY - this.offsetY;
			},
			onTouchMove(e) {
				this.offsetY = e.touches[0].clientY - this.startY;
			},
			onTouchEnd() {
				const H80 = this.screenHeight * 0.55
				const H30 = this.screenHeight * 0.1
				if (this.offsetY >= H80) {
					this.offsetY = H80
				} else if (this.offsetY < H80 && this.offsetY >= H30) {
					if (this.recordOffsetY != 0 && this.offsetY > this.recordOffsetY) {
						this.offsetY = H80
						this.recordOffsetY = H80
					} else {
						this.offsetY = H30
						this.recordOffsetY = H30
					}
				}

				if (this.offsetY == H80) {
					this.mapHeight = 70
				} else if (this.offsetY == H30) {
					this.mapHeight = 15


				}

			},
			goPlaceOrder() {
				uni.navigateTo({
					url: '/pageA/citywideDelivery/citywideDelivery'
				});
			},


			startScroll(e) {
				this.scrollLeft = e.detail.scrollLeft; // 水平滚动位置
			},

			//获取当前位置最近的快递柜位置
			getMinDistancePoint() {
				if (!this.userLocation) {
					return
				}
				const arr = this.markerList.map(it => {
					it['lat'] = it.latitude
					it['lng'] = it.longitude
					return it
				})
				this.$Request.postJson(
					`/app/point/getMinDistancePoint?lat=${this.userLocation.latitude}&lng=${this.userLocation.longitude}`,
					arr).then(res => {
					if (res.code == 0) {
						this.myNearests = res.data
						this.myNearest = this.myNearests
						this.basics = this.markerList.findIndex(it => it.id == res.data.id)
						this.scrollLeftLeft = ((this.basics + 2) * 82) - this.screenWidth
						// 更新导航信息
						this.updateNavigationInfo(this.basics);
					}
				});
			},

			nodeGap(e) {
				this.basics = e.target.dataset.index
				this.myNearest = this.markerList[this.basics]
				this.scrollLeftLeft = ((this.basics + 2) * 82) - this.screenWidth
				// 更新导航信息
				this.updateNavigationInfo(this.basics);





				// // 自动调整视野
				// this.mapContext.includePoints({
				// 	points: points,
				// 	padding: [40, 40, 40, 40]
				// });

			},

			change(index) {
				this.markers = []
				this.current = index;

				if (index == 1) {
					this.shipper.forEach((it, inx) => {
						this.markers.push({
							id: inx,
							latitude: it.shipperLat,
							longitude: it.shipperLng,
							title: `待接收`,
							iconPath: '../../static/image/jie.png',
							width: 30,
							height: 30,
							callout: {
								content: `待接收:${it.orderCount}`,
								color: '#ffffff',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#FF5A5A',
								padding: 4,
								display: 'ALWAYS'
							}
						})
					})
				}
				if (index == 2) {

					this.receive.forEach((it, inx) => {
						this.markers.push({
							id: inx,
							latitude: it.receiveLat,
							longitude: it.receiveLng,
							title: `待配送`,
							iconPath: '../../static/image/jie.png',
							width: 30,
							height: 30,
							callout: {
								content: `待配送:${it.orderCount}`,
								color: '#ffffff',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#FF5A5A',
								padding: 4,
								display: 'ALWAYS'
							}
						})
					})
				}
				this.updateUserLocationMarker()

			},

			// 初始化地图
			initMap() {
				// 创建地图上下文
				this.mapContext = uni.createMapContext('map', this);

				// 更新用户位置标记
				this.updateUserLocationMarker();
			},


			//点击标记点
			handleMarkerTap(event) {
				const {
					markerId,
					detail
				} = event;
				if (this.current == 1) {
					this.groupedArray = this.shipper[markerId]

				} else if (this.current == 2) {
					this.groupedArray = this.receive[markerId]
				}
			},

			getList(index) {
				try {
					this.$Request.getT('/app/riderLine/queryRiderLine', {
						area: this.userLocation.area
					}).then(res => {
						if (res.code == 0 && res.data) {
							this.pointList = res.data
							this.areaTypeCurrent = index
							this.switchLine = this.pointList[index]
							this.areaType = this.pointList.map((it, index) => {
								let data = {
									name: `${index +1}号线`,
									id: it.id
								}
								return data
							})
							const points = res.data[index]
							this.markerList = []
							this.markerList.push({
								id: 0,
								latitude: points.startPointLat,
								longitude: points.startPointLng,
								title: `起始点`,
								name: points.startPointName,
								iconPath: '../../static/image/start.png',
								width: 50,
								height: 50,
								callout: {
									content: '起始点',
									color: '#ffffff',
									fontSize: 12,
									borderRadius: 4,
									bgColor: '#1296DB',
									padding: 4,
									display: 'ALWAYS'
								}
							});
							points.wayPoints.forEach((it, index) => {
								this.markerList.push({
									id: index + 1,
									latitude: it.latitude,
									longitude: it.longitude,
									title: `途径点${index+1}`,
									name: it.name,
									iconPath: '../../static/image/waypoint.png',
									width: 30,
									height: 30,
									callout: {
										content: it.name,
										color: '#ffffff',
										fontSize: 12,
										borderRadius: 4,
										bgColor: '#D1CD70',
										padding: 4,
										display: 'ALWAYS'
									}
								})
							})

							this.markerList.push({
								id: points.wayPoints.length + 1,
								latitude: points.endPointLat,
								longitude: points.endPointLng,
								title: `结束点`,
								name: points.endPointName,
								iconPath: '../../static/image/end.png',
								width: 40,
								height: 40,
								callout: {
									content: '结束点',
									color: '#ffffff',
									fontSize: 12,
									borderRadius: 4,
									bgColor: '#1296DB',
									padding: 4,
									display: 'ALWAYS'
								}
							});
							this.getMinDistancePoint()
							this.$nextTick(() => {

								this.calculateRoute()

							})
						}
					});
				} catch (err) {
					console.error('同步获取失败:', err);
				}

			},


			// 获取用户当前位置
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: async (res) => {
						this.userLocation = {
							latitude: res.latitude,
							longitude: res.longitude,
							area: '',
						};
						const areaList = await this.latLngQueryAddress(res.latitude, res.longitude)
						this.userLocation.area =
							`${areaList.address_component.province}${areaList.address_component.city}${areaList.address_component.district}`
						this.getList(0)
						this.getMinDistancePoint()
						this.initMap()

					},
					fail: (err) => {
						console.error('获取位置失败:', err);
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						});
					}
				});
			},






			//根据经纬度获取地址
			latLngQueryAddress(lat, lng) {
				return new Promise((resolve, reject) => {
					const path = '/ws/geocoder/v1';
					const params = {
						key: this.mapKey,
						location: `${lat},${lng}`
					};
					const sk = configData.SecretKey;
					const sig = generateSignatureGet(path, params, sk);
					params.sig = sig;
					const url = `https://apis.map.qq.com${path}?${this.encodeParams(params)}`;

					uni.request({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								// 修正数据路径（根据实际返回结构调整）
								// const address = res.data.result?.formatted_addresses?.recommend;
								resolve(res.data.result); // 成功时返回地址
							} else {
								reject(new Error('请求失败')); // 处理 HTTP 错误状态
							}
						},
						fail: (err) => {
							reject(err); // 处理网络错误
						}
					});
				});
			},




			encodeParams(params) {
				return Object.entries(params)
					.map(([key, value]) => {
						return `${key}=${encodeURIComponent(value)}`
					})
					.join('&')
			},


			// 更新用户位置标记
			updateUserLocationMarker() {
				if (!this.userLocation) return;

				const userMarker = {
					id: 99999,
					latitude: this.userLocation.latitude,
					longitude: this.userLocation.longitude,
					title: '我的位置',
					// iconPath: '../../static/image/user-location.png',
					width: 30,
					height: 40,
					callout: {
						content: '当前位置',
						color: '#ffffff',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#F24E4E',
						padding: 4,
						display: 'ALWAYS'
					}
				};

				// 查找是否已存在用户位置标记
				const userMarkerIndex = this.markers.findIndex(marker => marker.id === 999);
				if (userMarkerIndex > -1) {
					// 更新现有标记
					this.markers.splice(userMarkerIndex, 1, userMarker);
				} else {
					// 添加新标记
					this.markers.push(userMarker);
				}

				// 添加位置精度圆圈
				this.circles = [{
					latitude: this.userLocation.latitude,
					longitude: this.userLocation.longitude,
					radius: 15,
					fillColor: '#367EEF20',
					color: '#367EEF40',
					strokeWidth: 1
				}];
			},




			// 计算路线
			calculateRoute() {
				// 转换格式：{latitude, longitude} -> "lat,lng"
				const waypointsStr = this.markerList.map(point =>
					`${point.latitude},${point.longitude}`
				).join(';');

				// 清空旧路线
				this.polyline = [];

				// 调用路线规划API
				this.$nextTick(() => {

					const path = '/ws/direction/v1/driving';
					const params = {
						key: this.mapKey,
						from: `${this.markerList[0].latitude},${this.markerList[0].longitude}`,
						to: `${this.markerList[this.markerList.length-1].latitude},${this.markerList[this.markerList.length-1].longitude}`,
						waypoints: waypointsStr
					};
					const sk = configData.SecretKey;
					const sig = generateSignatureGet(path, params, sk);
					params.sig = sig;
					const url = `https://apis.map.qq.com${path}?${this.encodeParams(params)}`;

					uni.request({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								// 修正数据路径（根据实际返回结构调整）
								this.handleRouteSuccess(res.data)
							}
						},
						fail: (err) => {
							console.log(err);
						}
					});
				})

			},

			// 路线规划成功回调
			handleRouteSuccess(res) {
				if (!res.result || !res.result.routes || res.result.routes.length === 0) {
					uni.showToast({
						title: '未找到可行路线',
						icon: 'none'
					});
					return;
				}

				const route = res.result.routes[0];
				const coors = route.polyline;
				const kr = 1000000; // 压缩系数

				// 坐标解压算法
				for (let i = 2; i < coors.length; i++) {
					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				}

				// 生成路径点数组
				const points = [];
				for (let i = 0; i < coors.length; i += 2) {
					points.push({
						latitude: coors[i],
						longitude: coors[i + 1]
					});
				}

				// 保存路线点用于导航
				this.routePoints = points;

				// 更新路线数据
				this.polyline = [{
					points: points,
					color: '#367EEF',
					width: 6,
					borderWidth: 2,
					borderColor: '#5B98FD',
					arrowLine: true
				}];

				// 保存路线信息
				this.totalDistance = route.distance || 0;
				this.totalTime = route.duration || 0;

				// 自动调整视野
				this.mapContext.includePoints({
					points: points,
					padding: [40, 80, 120, 80]
				});

				// 更新距离和时间显示
				// this.updateRouteInfo();
			},

			// 更新路线信息显示
			updateRouteInfo() {
				// 格式化距离
				if (this.totalDistance < 1000) {
					this.remainingDistance = `${this.totalDistance}米`;
				} else {
					this.remainingDistance = `${(this.totalDistance / 1000).toFixed(1)}公里`;
				}

				// 格式化时间
				if (this.totalTime < 60) {
					this.remainingTime = `${this.totalTime}分钟`;
				} else {
					const hours = Math.floor(this.totalTime / 60);
					const minutes = this.totalTime % 60;
					this.remainingTime = `${hours}小时${minutes}分钟`;
				}
			},

			// 开始导航
			startNavigation() {
				if (this.routePoints.length === 0) {
					uni.showToast({
						title: '请先计算路线',
						icon: 'none'
					});
					return;
				}

				this.isNavigating = true;
				this.currentPointIndex = 0;

				// 开始位置更新
				this.startLocationTracking();

				// 设置地图跟随用户位置
				this.recenterMap();

				uni.showToast({
					title: '开始导航',
					icon: 'success'
				});
			},

			// 开始位置跟踪
			startLocationTracking() {
				// 清除之前的定时器
				if (this.locationTimer) {
					clearInterval(this.locationTimer);
				}

				// 每3秒更新一次位置
				this.locationTimer = setInterval(() => {
					this.updateUserLocation();
				}, 3000);
			},

			// 更新用户位置
			updateUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.userLocation = {
							latitude: res.latitude,
							longitude: res.longitude
						};

						// 更新用户位置标记
						this.updateUserLocationMarker();

						// 检查是否接近路线终点
						this.checkArrival();

						// 更新导航信息
						this.updateNavigationInfo();
					},
					fail: (err) => {
						console.error('更新位置失败:', err);
					}
				});
			},

			// 检查是否到达终点
			checkArrival() {
				if (!this.userLocation || this.routePoints.length === 0) return;

				const endPoint = this.routePoints[this.routePoints.length - 1];
				const distance = this.calculateDistance(
					this.userLocation.latitude,
					this.userLocation.longitude,
					endPoint.latitude,
					endPoint.longitude
				);

				// 如果距离终点小于50米，认为已到达
				if (distance < 50) {
					this.stopNavigation();
					uni.showModal({
						title: '导航完成',
						content: '您已到达目的地',
						showCancel: false
					});
				}
			},

			// 更新导航信息
			updateNavigationInfo(e) {
				if (!this.userLocation || this.markerList.length === 0) return;

				// 计算剩余距离和时间
				const remainingPoints = this.markerList[e]
				let totalRemainingDistance = 0;
				totalRemainingDistance = this.calculateDistance(
					this.userLocation.latitude,
					this.userLocation.longitude,
					remainingPoints.latitude,
					remainingPoints.longitude
				);

				// 更新显示信息
				if (totalRemainingDistance < 1000) {
					this.remainingDistance = `${Math.round(totalRemainingDistance)}米`;
				} else {
					this.remainingDistance = `${(totalRemainingDistance / 1000).toFixed(1)}公里`;
				}

				// 估算剩余时间（假设平均速度30km/h）
				const speed = 4.5; // km/h
				const remainingTimeHours = totalRemainingDistance / 1000 / speed;
				const remainingMinutes = Math.round(remainingTimeHours * 60);
				this.remainingTime = `${remainingMinutes}分钟`;
			},

			// 计算两点间距离（米）
			calculateDistance(lat1, lng1, lat2, lng2) {
				const radLat1 = lat1 * Math.PI / 180.0;
				const radLat2 = lat2 * Math.PI / 180.0;
				const a = radLat1 - radLat2;
				const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS
				s = Math.round(s * 10000) / 10;
				return s;
			},

			// 重新定位地图中心到用户位置
			recenterMap() {
				if (this.userLocation) {
					this.mapContext.moveToLocation({
						latitude: this.userLocation.latitude,
						longitude: this.userLocation.longitude
					});
				}
			},

			// 停止导航
			stopNavigation() {
				this.isNavigating = false;

				// 清除位置更新定时器
				if (this.locationTimer) {
					clearInterval(this.locationTimer);
					this.locationTimer = null;
				}

				// 移除用户位置标记
				const userMarkerIndex = this.markers.findIndex(marker => marker.id === 999);
				if (userMarkerIndex > -1) {
					this.markers.splice(userMarkerIndex, 1);
				}

				// 清空位置精度圆圈
				this.circles = [];

				uni.showToast({
					title: '导航已结束',
					icon: 'none'
				});
			},

			// 清空所有
			clearAll() {
				this.markers = [this.markers[0]]; // 保留起点
				this.polyline = [];
				this.waypoints = [];
				this.routePoints = [];
				this.isNavigating = false;

				// 清除定时器
				if (this.locationTimer) {
					clearInterval(this.locationTimer);
					this.locationTimer = null;
				}

				// 清空导航相关信息
				this.currentPointIndex = 0;
				this.remainingDistance = '0米';
				this.remainingTime = '0分钟';
				this.nextTurnInfo = '直行';
				this.circles = [];
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		position: relative;
		height: 100vh;
	}

	.draggable-box {
		position: fixed;
		width: 100%;
		height: 80vh;
		background: #fff;
		// cursor: move;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
		z-index: 9998;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		// overflow: hidden;
		transition: .6s;
	}

	.topbtn {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		position: relative;

		.topbtn_fan {
			position: absolute;
			left: 10rpx;
			top: 0;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #A4A4A4;
		}
	}

	.map {
		width: 100%;
		transition: .5s all;
	}

	.distance {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.box {
		flex: 11;
	}

	.start-node {
		border: 5rpx solid #ffffff;
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-color: #049c50;
		color: #ffffff;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.middle-node {
		// border: 5rpx solid #ffffff;
		width: 15rpx;
		height: 15rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// border-radius: 50%;
		background-color: #049c50;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.vertical-text {
		display: inline-block;
		writing-mode: vertical-rl;
		// text-orientation: upright;
		text-align: left;
		font-size: 32rpx;
		height: 500rpx;
		position: relative;

		.nearest {
			position: absolute;
			top: 0;
			right: -45rpx;
			font-size: 24rpx;
			display: inline-block;
			writing-mode: vertical-rl;
			background-color: #55aaff;
			color: #ffffff;
			padding: 10rpx 0;
			border-radius: 5rpx;
		}
	}

	.top_box {
		width: 100%;
		min-height: 20vh;
		padding: 40rpx;

		.box_title {
			margin: 0 0 20rpx 0;
			font-size: 40rpx;
			font-weight: 700;
		}

		.box_or {
			font-size: 30rpx;
			margin: 20rpx 0;
			display: flex;

			.address {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				width: 30vw;
				overflow: hidden;
			}

			image {
				height: 30rpx;
				width: 30rpx;
				margin: 0 10rpx 0 0;
			}
		}

		.current_address {
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			margin: 20rpx 0;
		}

		.walk_distance {
			font-size: 28rpx;
			color: #8c8c8c;
		}
	}

	.box_bottom {
		width: 100%;
		background-color: #ffffff;
		height: 12vh;
		border-top: 1rpx solid #e8e8e8;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		justify-content: center;
		align-items: center;

		button {
			width: 200rpx;
			height: 70rpx;
		}
	}
</style>